<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>睿哥哥做的网站</title>
    <link rel="shortcut icon" href="img/闪购 - 副本.png" type="image/png">
    <link rel="stylesheet" href="xiaomi.css" type="">
</head>

<body>
    <div class="box">
        <!-- 用来存放顶部的广告 -->
    </div>
    <div class="nav">
        <div class="nav-center">

            <ul class="left">
                <li>小米商城</li>
                <li>MIUI</li>
                <li>IoT</li>
                <li>云服务</li>
                <li>金融</li>
                <li>有品</li>
                <li>小爱开放平台</li>
                <li>企业团购</li>
                <li>资质证照</li>
                <li>协议规则</li>
                <li class="downloadApp">
                    <a href=""> 加gege微信</a>
                    <div class="twoCode">
                        <img src="http://m.qpic.cn/psc?/V12CV7UZ0hzAAX/ruAMsa53pVQWN7FLK88i5tsJ0BQYk2LGEaEVw8bKblDCaswxsr4*GNjxzA6oZkzAZhLv3TicG0WYm.CX6VEhlIirFY7EHqiB*7m553xC.jI!/m&bo=rgGuAa4BrgEBCS4!&rf=collegeAlbum" alt="QRcode">
                        <span>微信二维码</span>
                    </div>
                </li>
                <li>智能生活</li>
                <li>Select Location</li>
            </ul>

            <!-- 导航栏的右侧区域 -->
            <ul class="right">
                <li>购物车（0）
                    <div class="cart-box">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>

                <li>消息通知</li>
                <li>注册</li>
                <li>登录</li>
            </ul>
        </div>
    </div>

    <div id="site-header">
        <!-- <div class="logo-small"><a href="https://www.mi.com/index.html"></a></div> -->
        <div style="
        /* 占据下logo处相对的位置 */
        float: left;
        width: 234px;
        height: 100%;
        /* border: 1px solid black; */
        ">
            <div class="logo-home">

                <div style="width: 55px;
                height: 55px;
                overflow: hidden;
                background-color: #ff6700;
                float: left;
                margin-top: 22.5px">
                    <a href="https://www.mi.com/index.html">
                        <img src="http://s02.mifile.cn/assets/static/image/mi-home.png" alt="">
                        <img src="http://s02.mifile.cn/assets/static/image/mi-logo.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <div id="header-nav">
            <ul>

                <li><a href="#">小米手机</a>
                    <div class="children-list">
                        <div class="children-list-auto">
                            <ul>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">小米10至尊版本</p>
                                    <span>5299元</span>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">小米10至尊版本</p>
                                    <span>5299元</span>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">小米10至尊版本</p>
                                    <span>5299元</span>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">小米10至尊版本</p>
                                    <span>5299元</span>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">小米10至尊版本</p>
                                    <span>5299元</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">R.(睿哥哥)系列</a>
                    <div class="children-list">
                        <div class="children-list-auto">
                            <ul>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0203f4e7dafcc0c9016a1b48556abf30.jpg?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">R10 睿哥哥同款系列</p>
                                    <span>499999元</span>
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
                                    <p class="title">R[x] 睿哥哥同款系列</p>
                                    <span>399999元</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">电视</a> </li>
                <li><a href="#">笔记本</a> </li>
                <li><a href="#">家电</a> </li>
                <li><a href="#">路由器</a> </li>
                <li><a href="#">智能硬件</a> </li>
                <li><a href="#">服务</a> </li>
                <li><a href="#">社区</a> </li>
            </ul>

        </div>

        <div class="search-bar">
            <input type="text" class="search">
            <a href="#"><input type="submit" value=""></a>
            <ul class="search-Box">
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
                <li><a href="#">睿哥哥同款手机</a></li>
            </ul>
        </div>

    </div>

    <div id=box3>
        <div class="left-nav">
            <ul>
                <li><a href="#">手机 电话卡</a>
                    <div class="category">
                        <!--  一个ul标签是一列商品-->


                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                        </ul>
                        <ul>


                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米10pro</span></a>
                            </li>

                        </ul>

                    </div>
                </li>

                <li><a href="#">电视 盒子</a>
                    <div class="category">
                        <!-- 一个ul标签是一列商品 -->


                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                        </ul>
                        <ul>


                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>
                            <li>
                                <a href="#"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5aad5f708998e76742d75d7c6b1394c.png?thumb=1&w=50&h=50&f=webp&q=90" alt=""><span>小米</span></a>
                            </li>

                        </ul>

                    </div>
                </li>

                <li><a href="#">笔记本 显示器</a></li>
                <li><a href="#">家电 插线板</a></li>
                <li><a href="#">出行 穿戴</a></li>
                <li><a href="#">智能 路由器</a></li>
                <li><a href="#">电源 配件</a></li>
                <li><a href="#">健康 儿童</a></li>
                <li><a href="#">耳机 音箱</a></li>
                <li><a href="#">生活 箱包</a></li>
            </ul>
        </div>


        <div class="photo">
            <ul>
                <li></li>
            </ul>

        </div>
    </div>

    <div id="box4">
        <ul class="left">
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                    <p>小米秒杀</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <p>企业团购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="">
                    <p>F码通道</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="">
                    <p>米粉卡</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="">
                    <p>以旧换新</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                    <p>话费充值</p>
                </a>
            </li>


        </ul>
        <div class="right">
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340" alt=""></a>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ca70ef337bf7c6d93aef6b59917bf6b.jpg?w=632&h=340" alt=""></a>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340" alt=""></a>
        </div>

    </div>

    <div class="gray">
        <div id="box5">
            <!-- 小米闪购 -->
            <div class="box-hd">
                <h2 class="title">小米闪购</h1>
                    <div class="titleBtn">
                        <button class="left"><</button>
                        <button class="right">></button>
                    </div>
            </div>
            <div class="container">
                <div class="left-clock">
                    <p class="time-title">10:00场</p>
                    <img src="img/闪购 - 副本.png" alt="">
                    <p class="time-end">距离结束还有</p>
                    <div>
                        <span>03</span>
                        <strong>:</strong>
                        <span>10</span>
                        <strong>:</strong>
                        <span>50</span>


                    </div>
                </div>

                <div class="right">
                    <ul>
                        <li>
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1545975724.92496169.jpg?thumb=1&w=167&h=167" alt="">
                            <h3>米家互联网洗烘一体机10Kg 白色</h3>
                            <p>限时抢购1899元</p>
                            <span>4999元</span><del>2999元</del>
                        </li>
                        <li>
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1545975724.92496169.jpg?thumb=1&w=167&h=167" alt="">
                            <h3>米家互联网洗烘一体机10Kg 白色</h3>
                            <p>限时抢购1899元</p>
                            <span>4999元</span><del>2999元</del>
                        </li>
                        <li>
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1545975724.92496169.jpg?thumb=1&w=167&h=167" alt="">
                            <h3>米家互联网洗烘一体机10Kg 白色</h3>
                            <p>限时抢购1899元</p>
                            <span>4999元</span><del>2999元</del>
                        </li>
                        <li>
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1545975724.92496169.jpg?thumb=1&w=167&h=167" alt="">
                            <h3>米家互联网洗烘一体机10Kg 白色</h3>
                            <p>限时抢购1899元</p>
                            <span>4999元</span><del>2999元</del>
                        </li>
                    </ul>

                </div>

            </div>

            <div class="photo">
                <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/47addc32aff1d2a84fc4535707190881.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
            </div>
            <!-- 接下来是手机栏 -->
            <div class="phone">
                <div class="head">

                    <h2 class="title-left">手机</h2>
                    <div class="title-right">
                        <a href="#">
                            <p>查看全部<i>></i></p>
                        </a>
                    </div>
                </div>
                <div class="container">
                    <div class="left">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=219&h=576&f=webp&q=90" alt="">

                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                        </ul>
                    </div>


                </div>



            </div>
            <!--广告栏目  -->
            <div class="adv">
                <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3b86ede4dd31d7c126d56fbdde4f855.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt=""></a>
            </div>
            <!-- 家电栏 -->

            <div class="home-appliance">
                <div class="head">

                    <h2 class="title-left">家电</h2>
                    <div class="title-right">
                        <span><a href="#"> 热门</a></span>
                        <span><a href="#">电视影音</a></span>
                    </div>
                </div>
                <div class="homeAcontainer">
                    <!-- 左侧 -->
                    <div class="left">
                        <div>
                            <div class="img-top"></div>
                            <div class="img-bottom"></div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7e2127506fd2209f3115828404269d45.jpg?thumb=1&w=225&h=225" alt="">
                                <h3>小米电视4S 75英寸</h3>
                                <p>4K HDR，人工智能语音</p>
                                <span>4499元</span>
                            </li>
                            <!-- 最后一个li中分出上下两块 -->
                            <li>
                                <div class="top">
                                    <div>
                                        <h3>Air 13.3" 2019款</h3>
                                        <span>5499元</span>
                                    </div>
                                    <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                </div>
                                <div class="bottom">
                                    <div>
                                        <h3>浏览更多</h3>
                                        <span>电视影音</span>
                                        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=238014309,2177468780&fm=26&gp=0.jpg" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>


                </div>

            </div>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90" width="1226" style="margin: 22px 0;" class="" alt=""></a>

            <!-- 智能栏目 -->
            <div class="home-appliance">
                <div class="head">

                    <h2 class="title-left">智能</h2>
                    <div class="title-right">
                        <span><a href="#"> 热门</a></span>
                        <span><a href="#">安防</a></span>
                        <span><a href="#">出行</a></span>
                    </div>
                </div>
                <div class="homeAcontainer">
                    <!-- 左侧 -->
                    <div class="left">
                        <div>
                            <div class="img-top"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                            <div class="img-bottom"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                <p>告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <!-- 最后一个li中分出上下两块 -->
                            <li>
                                <div class="top">
                                    <div>
                                        <h3>平衡车</h3>
                                        <span>5499元</span>
                                    </div>
                                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1r_x_BgLT1RXrhCrK.jpg?thumb=1&w=94&h=94" alt="">
                                </div>
                                <div class="bottom">
                                    <div>
                                        <h3>浏览更多</h3>
                                        <span>热门</span>
                                        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3714883092,1643724213&fm=26&gp=0.jpg" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>


                </div>

            </div>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff34ebd89539023fb9ee2a35b58ac8ce.jpg?thumb=1&w=1226&h=120&f=webp&q=90" width="1226" style="margin: 22px 0;" class="" alt=""></a>


            <!-- 搭配 -->
            <div class="home-appliance">
                <div class="head">

                    <h2 class="title-left">搭配</h2>
                    <div class="title-right">
                        <span><a href="#"> 热门</a></span>
                        <span><a href="#">耳机音箱</a></span>
                    </div>
                </div>
                <div class="homeAcontainer">
                    <!-- 左侧 -->
                    <div class="left">
                        <div>
                            <div class="img-top"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                            <div class="img-bottom"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a00bdd568dbc2b02f8fe0fa8d1b46f28.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f0914c60fa1ab807972541b4e2b1a4cd.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米智能门锁E</h3>
                                告别钥匙，畅享便捷生活</p>
                                <span>4999元</span>
                            </li>
                            <!-- 最后一个li中分出上下两块 -->
                            <li>
                                <div class="top">
                                    <div>
                                        <h3>Air 13.3" 2019款</h3>
                                        <span>5499元</span>
                                    </div>
                                    <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                </div>
                                <div class="bottom">
                                    <div>
                                        <h3>浏览更多</h3>
                                        <span>电视影音</span>
                                        <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>


                </div>

            </div>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1615d1842fe85914a545297836a44271.jpg?thumb=1&w=1226&h=120&f=webp&q=90" width="1226" style="margin: 22px 0;" class="" alt=""></a>

            <!-- 配件 -->
            <div class="home-appliance">
                <div class="head">

                    <h2 class="title-left">配件</h2>
                    <div class="title-right">
                        <span><a href="#"> 热门</a></span>
                        <span><a href="#">充电器</a></span>
                    </div>
                </div>
                <div class="homeAcontainer">
                    <!-- 左侧 -->
                    <div class="left">
                        <div>
                            <div class="img-top"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/739ebd8abfc2b1be8866a2c1ad87e709.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                            <div class="img-bottom"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe4182f1d9a5befdf2380ec90ae1620.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
                                <h3>小米真无线蓝牙耳机 Air 2</h3>
                                <p>智能真无线</p>
                                <span>999元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=225&h=225&f=webp&q=90" alt="">
                                <h3>小米电视4S 75英寸R，人工智能语音</h3>
                                <span>1999元</span></li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>1999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>1999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>1999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>1999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>1999元</span>
                            </li>
                            <!-- 最后一个li中分出上下两块 -->
                            <li>
                                <div class="top">
                                    <div>
                                        <h3>Air 13.3" 2019款</h3>
                                        <span>5499元</span>
                                    </div>
                                    <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                </div>
                                <div class="bottom">
                                    <div>
                                        <h3>浏览更多</h3>
                                        <span>电视影音</span>
                                        <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>


                </div>

            </div>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ddec858a9371b4d7833181941520bf8b.jpg?thumb=1&w=1226&h=120&f=webp&q=90" width="1226" style="margin: 22px 0;" class="" alt=""></a>

            <!-- 周边 -->
            <div class="home-appliance">
                <div class="head">

                    <h2 class="title-left">周边</h2>
                    <div class="title-right">
                        <span><a href="#"> 热门</a></span>
                        <span><a href="#">出行</a></span>
                    </div>
                </div>
                <div class="homeAcontainer">
                    <!-- 左侧 -->
                    <div class="left">
                        <div>
                            <div class="img-top"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/37dc0898c2624b4130da4631f2d9a675.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                            <div class="img-bottom"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/582984b9c56cf3c48382a81528a4dfdf.jpg?thumb=1&w=219&h=281&f=webp&q=90" width="234px" height="300px" alt=""></div>
                        </div>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>米家飞行员太阳镜 Pro</h3>
                                <p>尼龙偏光 方便佩戴</p>
                                <span>199元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>米家飞行员太阳镜 Pro</h3>
                                <p>尼龙偏光 方便佩戴</p>
                                <span>499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>米家飞行员太阳镜 Pro</h3>
                                <p>尼龙偏光 方便佩戴</p>
                                <span>499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>米家飞行员太阳镜 Pro</h3>
                                <p>尼龙偏光 方便佩戴</p>
                                <span>499元</span>
                            </li>
                            <li>
                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>米家飞行员太阳镜 Pro</h3>
                                <p>尼龙偏光 方便佩戴</p>
                                <span>499元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <li>
                                <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=188&h=188&f=webp&q=90" alt="">
                                <h3>小米10 至尊版</h3>
                                <p>120X 变焦/120W秒充/120Hz屏幕</p>
                                <span>4999元</span>
                            </li>
                            <!-- 最后一个li中分出上下两块 -->
                            <li>

                                <div class="bottom">
                                    <div>
                                        <h3>浏览更多</h3>
                                        <span>电视影音</span>
                                        <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=100&h=100&f=webp&q=90" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>


                </div>

            </div>
            <a href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1226&h=120&f=webp&q=90" width="1226" style="margin: 22px 0;" class="" alt=""></a>
            <!-- 视频最后一栏 -->
            <div class="phone">
                <div class="head">

                    <h2 class="title-left">视频</h2>
                    <div class="title-right">
                        <a href="#">
                            <p>查看全部<i>></i></p>
                        </a>
                    </div>
                </div>
                <div class="img">
                    <ul class="vidio">
                        <li>
                            <a href="#">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg?thumb=1&w=296&h=180&f=webp&q=90" alt="">
                                <div class="icon"></div>
                                <h3>Redmi 10X系列发布会</h3>
                                <p>Redmi 10X系列发布会</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg?thumb=1&w=296&h=180&f=webp&q=90" alt="">
                                <div class="icon"></div>
                                <h3>Redmi 10X系列发布会</h3>
                                <p>Redmi 10X系列发布会</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg?thumb=1&w=296&h=180&f=webp&q=90" alt="">
                                <div class="icon"></div>
                                <h3>Redmi 10X系列发布会</h3>
                                <p>Redmi 10X系列发布会</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">

                                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/101b19aca4bb489bcef0f503e44ec866.jpg?thumb=1&w=296&h=180&f=webp&q=90" alt="">
                                <div class="icon"></div>
                                <h3>Redmi 10X系列发布会</h3>
                                <p>Redmi 10X系列发布会</p>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <!--这是页面尾部  -->
        <div class="page-footer">
            <div class="page-footer-auto">
                <!-- footer-service -->
                <div class="footer-service">
                    <ul class="clf">
                        <li>
                            <a href="#">
                                <i class="img"></i>
                                <span>预约维修服务</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="img"></i>
                                <span>7天无理由退货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="img"></i>
                                <span>15天免费换货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="img"></i>
                                <span>满99元包邮</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="img"></i>
                                <span>520余家售后网点</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- footer-links -->
                <div class="footer-links clf">
                    <ul>
                        <li>帮助中心</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li>服务支持</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li>线下门店</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li>关于小米</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                        <li><a href="#">订单操作</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li>关注我们</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <ul>
                        <li>特色服务</li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">购物指南</a></li>
                        <li><a href="#">订单操作</a></li>
                    </ul>
                    <!-- col-contact -->
                    <div class="footer-links-right">
                        <p class="phone">400-100-5678</p>
                        <p class="time">8:00-18:00（仅收市话费）</p>
                        <div class="btn-line-primary">
                            <a href="#">
                                <i class="img"></i>
                                <span>人工客服</span>
                            </a>
                        </div>
                        <div class="follow">
                            <div>
                                <span>关注小米：</span>
                                <a href="#" class="wb"></a>
                                <a href="#" class="wx">
                                    <img src="./img/wx-img.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--右侧的工具栏   -->
            <div class="home-tool-bar">
                <!-- 方法一：在css里加图片 -->
                <a href="#" class="item">
                    <div class="icon">
                        <img src="" alt="">
                    </div>
                    <span>哥哥二维码</span>
                    <!-- 二维码 -->
                    <div class="qrcode">
                        <img src="http://m.qpic.cn/psc?/V12CV7UZ0hzAAX/ruAMsa53pVQWN7FLK88i5tsJ0BQYk2LGEaEVw8bKblDCaswxsr4*GNjxzA6oZkzAZhLv3TicG0WYm.CX6VEhlIirFY7EHqiB*7m553xC.jI!/m&bo=rgGuAa4BrgEBCS4!&rf=collegeAlbum" alt="">
                        <span>扫码 尝尝</span>
                    </div>
                </a>
                <!-- 方法二：在html里加图片 -->
                <a href="#" class="item">
                    <div class="icon2">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png" alt="">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/41f858550f42eb1770b97faf219ae215.png" class="hover" alt="">

                    </div>
                    <span>个人中心</span>

                </a>
                <a href="#" class="item">
                    <div class="icon2">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12eb0965ab33dc8e05870911b90f3f13.png" alt="">
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/95fbf0081a06eec7be4d35e277faeca0.png" class="hover" alt="">

                    </div>
                    <span>售后服务</span>

                </a>
                <a href="#" class="item">
                    <div class="icon2">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png" alt="">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/5e9f2b1b0da09ac3b3961378284ef2d4.png" class="hover" alt="">
                    </div>
                    <span>人工客服</span>

                </a>
                <a href="#" class="item">
                    <div class="icon2">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png" alt="">
                        <img src="https://i8.mifile.cn/b2c-mimall-media/692a6c3b0a93a24f74a29c0f9d68ec71.png " class="hover " alt=" ">
                    </div>
                    <span>购物车</span>

                </a>
                <a href="#" class="item">
                    <div class="icon2">
                        <img src="https://i1.mifile.cn/f/i/2018/home/totop.png" alt="">
                        <img src="https://i1.mifile.cn/f/i/2018/home/totop_hover.png " class="hover " alt=" ">
                    </div>
                    <span>回顶部</span>

                </a>
            </div>

            <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br>
            <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
            <br> <br> <br> <br> <br>
            <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</body>

</html>